<!--
 * @Description: 
 * @Author: william
 * @Date: 2025-06-09 16:24:13
 * @LastEditors: william
 * @LastEditTime: 2025-08-30 16:28:27
-->
<template>
  <nw-PageTitle title="油烟机设置" isBack />
  <nw-PageContainer>
    <scroll-view class="scroll-content" scroll-y>
      <view class="lists">
        <view class="list">
          <view class="list-top">
            <view class="lt-left">
              <view class="list-title">抽风扇转速</view>
              <view class="list-subtitle">下拉选择默认风扇转速</view>
            </view>
            <view class="lt-right">
              <nw-Switch v-model="formData.value1"></nw-Switch>
            </view>
          </view>
          <view class="list-content">
            <view class="li">
              <view class="li-left">
                <view class="li-label">默认风扇转速</view>
                <view class="refer-value">1级-6级</view>
              </view>
              <view class="li-right">
                <up-number-box
                  v-model.number="formData.value2"
                  :min="1"
                  :step="1"
                  :max="6"
                  integer
                  @change="handleNumberChange"
                  @blur="handleNumberBlur($event, 'value2', 1)"
                ></up-number-box>
              </view>
            </view>
          </view>
        </view>
        <view class="list">
          <view class="list-top">
            <view class="lt-left">
              <view class="list-title">照明灯亮度</view>
              <view class="list-subtitle">下拉选择默认灯光亮度</view>
            </view>
            <view class="lt-right">
              <nw-Switch v-model="formData.value3"></nw-Switch>
            </view>
          </view>
          <view class="list-content">
            <view class="li">
              <view class="li-left">
                <view class="li-label">默认亮度等级</view>
                <view class="refer-value">1级-6级</view>
              </view>
              <view class="li-right">
                <up-number-box
                  v-model.number="formData.value4"
                  :min="1"
                  :step="1"
                  :max="6"
                  integer
                  @blur="handleNumberBlur($event, 'value4', 1)"
                ></up-number-box>
              </view>
            </view>
          </view>
        </view>
        <view class="list">
          <view class="list-top">
            <view class="lt-left">
              <view class="list-title">延时关闭</view>
              <view class="list-subtitle">
                烹饪完成后风扇与灯光延时关闭时长
              </view>
            </view>
            <view class="lt-right">
              <nw-Switch v-model="formData.value5"></nw-Switch>
            </view>
          </view>
          <view class="list-content">
            <view class="li">
              <view class="li-left">
                <view class="li-label">默认延时时长(秒/s)</view>
                <view class="refer-value">1s-60s</view>
              </view>
              <view class="li-right">
                <up-number-box
                  v-model.number="formData.value6"
                  :min="1"
                  :step="1"
                  :max="60"
                  integer
                  @blur="handleNumberBlur($event, 'value6', 1)"
                ></up-number-box>
              </view>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
  </nw-PageContainer>
</template>

<script setup>
// 表单参数
const formData = ref({
  value1: false,
  value2: 2,
  value3: true,
  value4: 2,
  value5: true,
  value6: 5
})

onMounted(_ => {
  //
})

const handleNumberChange = e => {
  console.log('handleNumberChange-当前值为: ', e.value)
}

const handleNumberBlur = (e, key, min) => {
  console.log(
    'handleNumberBlur-当前值为: ',
    e.value,
    min > e.value ? min : e.value
  )
  formData.value[key] = min > e.value ? min : e.value
}
</script>

<style lang="scss" scoped>
.scroll-content {
  height: calc(100%);
  overflow: hidden;
  box-sizing: border-box;
}

.lists {
  padding: 0 22rpx 22rpx;
  .list {
    margin-top: 22rpx;
    padding: 0 22rpx;
    background-color: var(--bg-color);
    border-radius: 18rpx;
    box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(6, 29, 23, 0.03);
    .list-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 74rpx;
      box-sizing: border-box;
    }
    .lt-left {
      flex: 1;
      display: flex;
      align-items: center;
      line-height: 24rpx;
    }
    .list-title {
      font-size: 26rpx;
      font-weight: 600;
      color: var(--color-333);
    }
    .list-subtitle {
      margin-left: 16rpx;
      font-size: 18rpx;
      font-weight: 400;
      color: var(--color-999);
    }
    .lt-right {
      //
    }
  }
}

.list-content {
  .li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16rpx 0;
    border-top: 1rpx solid var(--border-color);
    .li-left {
      display: flex;
      flex-direction: column;
    }
    .li-label {
      line-height: 24rpx;
      font-size: 22rpx;
      font-weight: 400;
      color: var(--color-333);
    }
    .refer-value {
      margin-top: 8rpx;
      line-height: 20rpx;
      font-size: 18rpx;
      font-weight: 400;
      color: var(--color-999);
    }
    .li-right {
      display: flex;
      align-items: center;
      .text {
        line-height: 22rpx;
        margin-right: 20rpx;
        font-size: 22rpx;
        font-weight: 400;
        color: var(--color-666);
      }
    }
  }
}
</style>
